<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Facturas</title>
<link rel="stylesheet" type="text/css"  href="../easyui/themes/metro-blue/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery10.2.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="../easyui/datagrid-filter.js"></script>
<script type="text/javascript" src="../easyui/locale/easyui-lang-es.js"></script>
<style>
#mytabla {
	margin: 0 auto;
	width: 80%;
	border: 1px solid;
display:
margin-bottom: 10px;
	margin-top: 10px;
}
#pastel {
	margin: 0 auto;
	margin-top: 10px;
	width: 50%;
	border: 1px solid;
}
.panel-title {
	margin: 0 auto;
	text-align: center;
}
</style>
<style media="print">
.datagrid-cell {
	width: 10px;
}
tbody {
	font-size: 10px;
}
#mytabla {
	width: 95%;
}
body {
	font-size: 12px;
}
td {
	font-size: 10px;
	font-weight: bold;
	width: 10px;
}
.datagrid-pager {
	display: none;
	visibility: hidden;
}
.pagination {
	display: none;
	visibility: hidden;
}
</style>
<!-- se carga la api de google  -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<!--  paquete que se esta utilizando  -->
<script type="text/javascript">
//google.load('visualization', '1', {packages: ['corechart']} );
google.load('visualization', '1', {packages: ['charteditor']});

// se dibuja la tabla
//google.setOnLoadCallback(drawChart);

function drawChart() {
var jsonData = $.ajax({
url: "http://localhost/facturacion-inventario/componentes/vista_facturas/datos_grafico.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

var options = {
title: 'Precios',
hAxis: {title: 'precios',  titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0, titleTextStyle: {color: 'red'}},
is3D: true

};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('pastel'));
chart.draw(data, options );
}




google.setOnLoadCallback(drawChart);

</script>
<script type="text/javascript" src="../libreria_javascript/funciones.js"></script>
<script language="javascript">
$(document).ready(function() {
$(".botonExcel").click(function(event) {
$("#datos_a_enviar").val( $("<div>").append( $("#mytabla").eq(0).clone()).html());
$("#FormularioExportacion").submit();
});
});
</script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<!--  <form action="excel.php" method="post" target="_blank" id="FormularioExportacion">
<input type="button" value="enviar excel" class="botonExcel">
<input type="hidden" id="datos_a_enviar" name="datos_a_enviar" />
</form>-->

<div  class="easyui-resizable" id="mytabla" data-options="minWidth:250,minHeight:250" >
  <table class="easyui-datagrid"  id="dg"  url="datos_jeasy.php" align="center" title="Reporte Productos <i onClick='datagrid();' class='icon-th'></i>" fitcolumns="true" 
data-options="

singleSelect:true,                  
remoteSort:false,
collapsible:true                
">
    <thead id="tabla_exportar">
      <tr>
        <th field="id" data-options=""  width="5" sortable="true">ID</th>
        <th field="nombre_producto" data-options="" width="20"  sortable="true">nombre producto</th>
        <th field="precio_venta" data-options=""  width="20" sortable="true">Precio Venta</th>
        <th field="precio_costo" data-options="" width="20"  sortable="true">Precio Costo</th>
        <th field="minimo" data-options="" width="10"  sortable="true">minimo</th>
        <th field="maximo" data-options="" width="10"  sortable="true">maximo</th>
        <th field="stock" data-options="" width="30"  sortable="true">stock</th>
      </tr>
    </thead>
  </table>
</div>
<article> 
  
  <!-- seleccionamos la tabla -->
  <div id="tabla" class="charts"></div>
  <div id="pastel" class="torta" ></div>
</article>
<script type="text/javascript">

function datagrid()
{
$('#dg').datagrid({striped:true});
$('#dg').datagrid({pagination:true});
boton_pagina();
}

function cerrar_paginacion()
{
$('#dg').datagrid({pagination:false});
}



function boton_pagina(){		
var pager = $('#dg').datagrid('getPager');    // get the pager of datagrid
pager.pagination({
showPageList:false,
buttons:[{
iconCls:'icon-search',
handler:function(){
filtrar();
}},
{
iconCls:'icon-file',
handler:function(){
tableToExcel('mytabla', 'reporte')
}},
{
iconCls:'icon-plus',
handler:function(){
ver_detalle();
}},
{
iconCls:'icon-print',
handler:function(){
window.print() ;
}}],
onBeforeRefresh:function(){
datagrid();
return true;
}});
}



function filtrar(){

$(function(){
var dg = $('#dg').datagrid();
dg.datagrid('enableFilter', [{
field:'listprice',
type:'numberbox',
options:{precision:1},
op:['equal','notequal','less','greater']
},{
field:'unitcost',
type:'numberbox',
options:{precision:1},
op:['equal','notequal','less','greater']
},{
field:'status',
type:'combobox',
options:{
panelHeight:'auto',
data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],
onChange:function(value){
if (value == ''){
dg.datagrid('removeFilterRule', 'status');
} else {
dg.datagrid('addFilterRule', {
field: 'status',
op: 'equal',
value: value
});
}
dg.datagrid('doFilter');
}}
}]);
boton_pagina();	 
});
}


function ver_detalle(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv" style="padding:5px 0"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
height:80,
border:false,
cache:false,
href:'detalle.php?id='+row.id,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
}});
$('#dg').datagrid('fixDetailRowHeight',index);
}});
boton_pagina();	
}



</script>
</body>
</html>